<template>
  <div class="header-container">
      <a href="https://www.nuxt.com.cn/docs/getting-started/introduction" target="_blank">
        <a-space>
          <img src="@/assets/images/logo.png" height="40" />
          <img src="@/assets/images/logo-text.svg" height="30" />
        </a-space>
      </a>
      <div class="header-menu">
        <a-space>
          <NuxtLink href="/" >服务端渲染</NuxtLink>
          <NuxtLink href="/staticPage" >客户端渲染</NuxtLink>
        </a-space>
      </div>
  </div>
</template>
<script lang="ts" setup>
</script>

<style lang="less">
.header-container {
  width: 100vw;
  height: 60px;
  padding-left: 5rem;
  padding-right: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top:0;
  .header-menu {
    flex:1;
    padding-right: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
